<template>
    <!-- 修改资料 -->

    <div>
        <!--  v-if="visible"  @click.self="handleClose" -->
        <!-- 内容主题区域 -->
        <el-card>
            <el-form-item label="出差时间">
                <el-date-picker v-model="form.startIngDateTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
        </el-card>
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules"
            class="borderNone" disabled>
            <el-card style="margin-top: 10px;">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="业务员" prop="salesId">
                            <el-input v-model="form.employeeName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="所在部门" prop="deptName">
                            <el-input v-model="form.deptName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="拜访类别" prop="visitObjectKind">
                            <el-input v-model="form.visitObjectKindName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="系统提醒">
                            <el-checkbox style="width: 5%;" v-model="form.remind" true-label="1"
                                false-label="0"></el-checkbox>
                            提前<el-input style="width: 20%;" v-model="form.remindDays" type="number" :min="0"></el-input>天提醒
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="邮件提醒">
                            <el-checkbox style="width: 5%;" v-model="form.isSendEmail" true-label="1"
                                false-label="0"></el-checkbox>
                            提前<el-input style="width: 20%;" v-model="form.emailRemindDays" type="number"
                                :min="0"></el-input>天提醒
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="类型" prop="planType">
                            <el-input v-model="form.planTypeName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="预计费用" prop="forecastCost">
                            <el-input v-model="form.forecastCost"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="主题" prop="title">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户名称" prop="custMan">
                            <el-input v-model="form.custMan"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="联系方式">
                            <el-input v-model="form.custPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="estimateStartDateTime" label="预计出发时间">
                            <el-input v-model="form.estimateStartDateTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="estimateBackDateTime" label="预计结束时间">
                            <el-input v-model="form.estimateStartDateTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="visitAddress" label="活动地址">
                            <el-input v-model="form.visitAddress"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item prop="forecastCost" label="预计费用">
                            <el-input v-model="form.forecastCost" type="number" @change="costChange"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="同行人员">
                            <el-input v-model="form.accompaniedBy"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item prop="planContent" label="出差事由">
                    <el-input v-model="form.planContent" type="textarea"></el-input>
                </el-form-item>
            </el-card>
        </el-form>
        <el-card style="margin-top: 20px;">
            <sc-title title="行程安排清单"></sc-title>
            <el-scrollbar height="200px">
                <el-form-item prop="column">
                    <ts-form-table v-model="dataList" placeholder="暂无数据" disabled>
                        <template #tableContent>
                            <el-table-column prop="startDateTime" label="出发时间" width="200">
                            </el-table-column>
                            <el-table-column prop="origo" label="起点" width="200">
                            </el-table-column>
                            <el-table-column prop="destn" label="终点" width="200">
                            </el-table-column>
                            <el-table-column prop="transportName" label="交通工具" width="200">
                            </el-table-column>
                            <el-table-column prop="custName" label="客户" width="200">
                            </el-table-column>
                            <el-table-column prop="accompaniedBy" label="同行人员" width="220">
                            </el-table-column>
                            <el-table-column prop="planContent" label="摘要" width="200">
                            </el-table-column>
                        </template>
                    </ts-form-table>
                </el-form-item>
            </el-scrollbar>
        </el-card>

        <div class="button-position" style="margin-top: 5px;">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="updateVisible">取 消</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/trip'
import sysApi from '@/api/model/system'
import tsFormTable from '@/components/scFormTable/index.vue'
import tsSelect from '@/components/scSelect/index.vue'
import { deduplication } from '@/utils/arr.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
// 添加用户数据的对象
const form = ref({})
const dataList = ref([])
const formRef = ref()
const formRules = reactive({
    number: [
        { required: true, message: "请输入编号", trigger: "blur" }
    ]
})
onMounted(() => {

    getInit()
})
const getInit = async () => {
    let res = await Api.employeePlan.detail.post(props.paramsData)
    if (res.code == '200') {
        form.value = res.data
        dataList.value = res.dataList
    }

}
const updateVisible = (val) => {
    emit('updatetable')
}
const submit = async () => {
    let param = {
        bean: form.value
    }
    let res = await Api.employeePlan.doStartingEnrol.post(param)
    if (res.code == 200) {
        ElNotification.success({ title: '', message: '提交成功！', duration: 2000 });
        emit('updatetable', true);
    }

}
</script>
<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }

    :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;
    }
}
</style>



